<template>
  <a-layout class="base-layout">
    <!-- 左侧sider start -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <!-- logo组件 -->
      <base-logo :collapsed="collapsed" />
      <!-- menu组件 -->
      <base-menu :collapsed="collapsed" />
    </a-layout-sider>
    <!-- 左侧sider end -->
    <!-- 右侧 main -->
    <a-layout>
      <!-- 右侧header -->
      <a-layout-header style="background: #fff; padding: 0">
        <a-row style="height: 100%;">
          <a-col :span="5">
            <a-icon
                class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="collapsed = !collapsed"
            />
            <span style="font-size: 20px; font-weight: 500">{{ route.name }}</span>
          </a-col>
        </a-row>
      </a-layout-header>
      <!-- 右侧content -->
      <a-layout-content class="layout-content">
        <base-content style="height: 100%" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { Layout as ALayout, Row as ARow, Col as ACol } from 'ant-design-vue';
import AIcon from 'ant-design-vue/es/icon';
import BaseLogo from './components/Logo.vue';
import BaseMenu from './components/Menu.vue';
import BaseContent from './components/Content.vue';

// 响应式状态
const collapsed = ref(false);

// 路由信息
const route = useRoute();
</script>

<style scoped>
.base-layout {
  display: flex;
  overflow: hidden;
  min-height: 100vh;
}

.base-layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.base-layout .trigger:hover {
  color: #1890ff;
}

.base-layout .layout-content {
  margin: 0px;
  padding: 0px;
  background: #fff;
}

.header-avatar {
  color: #fff;
  background-color: #f58c00;
}

.header-avatar:hover {
  cursor: pointer;
}
</style>
